<template>
	<view class="app">
		<view class="panel">
			<view class="query">	
				<view class='date'><input v-model="key" placeholder="ID或姓名"/></view>		
				<view><button class="btn" @click="loaddata">查询</button></view>
			</view>
		</view>
		
		<view class="panel" style="overflow-x: auto; padding-bottom: 60px;">
			<view class="table">
				<view class="row header">
					<view class="cell" @click="changesort('id')">ID</view>
					<view class="cell">
						<text style="border-bottom: 1px solid #fff;">姓名</text>
						<text @click="changesort('channel_rate')">比例</text>
					</view>
					<view class="cell">
						<text style="border-bottom: 1px solid #fff;">关注</text>
						<text>注册</text>
					</view>
					<view class="cell">
						<text style="border-bottom: 1px solid #fff;">单量</text>
						<text>流水</text>
					</view>
					<view class="cell">
						<text style="border-bottom: 1px solid #fff;" @click="changesort('cumulative_brokerage')">分成</text>
						<text @click="changesort('brokerage')">余额</text>
					</view>
					<view class="cell">操作</view>
				</view>
				<view class="row body" v-for="(item,index) in channeldata">
					<view @click="getQrcode(item.id)" :class="'cell status2_'+item.is_freeze">{{item.id}}</view>
					<view class="cell">
						<text>{{item.realname}}</text>
						<text>{{item.channel_rate}}%</text>
					</view>
					<view class="cell">
						<text>{{item.authcount}}</text>
						<text>{{item.joincount}}</text>
					</view>
					<view class="cell">
						<text>{{item.ordercount}}</text>
						<text>{{item.ordermoney}}</text>
					</view>
					<view class="cell">
						<text>{{item.cumulative_brokerage}}</text>
						<text>{{item.brokerage}}</text>
					</view>
					<view class="cell">
						<text @click="viewedit('popup',item.id)" class="noborder">查看</text>
						<!-- <text @click="viewedit('popup',item.id)">修改</text> -->
					</view>
					
				</view>
			</view>	
			<view class="page">
				<view class="page-item">
					<wyb-pagination :total-items="channel.total" :page-items="channel.per_page" :current="channel.current_page" :show-total-item="true" :show-icon="true" @change="loaddata"/>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :animation="true" :maskClick="true">
			<view class="popup">
				<view class="main">
					<view class="flex justify-center" style="font-weight:bold; padding: 8px 0;">
						{{channelinfo.realname}} / {{channelinfo.id}} / {{channelinfo.channel_rate}}%
					</view>
					<view class="flex tab" style="width: 95vw; overflow-x: scroll;">
						<view @click="changetab(1)" :class="tab==1?'active':''">资料</view>
						<view @click="changetab(2)" :class="tab==2?'active':''">订单</view>
						<view @click="changetab(3)" :class="tab==3?'active':''">推广人</view>
						<view @click="changetab(4)" :class="tab==4?'active':''">资金流水</view>
						<view @click="changetab(7)" :class="tab==7?'active':''">数据报表</view>
						<view @click="changetab(6)" :class="tab==6?'active':''">推广日报</view>
						<view @click="changetab(5)" :class="tab==5?'active':''">下级</view>
					</view>
					<view class="content">
						<view class="info" v-if="tab==1">
							<view class="item">
								<view>名称</view>
								<view><input class="setinput" v-model="channelinfo.realname" placeholder="请输入渠道名称" /></view>
								<view>({{channelinfo.id}})</view>
							</view>
							<view class="item">
								<view>电话</view>
								<view>{{channelinfo.mobile}}</view>
							</view>
							<view class="item">
								<view>分成/余额</view>
								<view>{{channelinfo.cumulative_brokerage}}元 / {{channelinfo.brokerage}}元</view>
							</view>
							<view class="flex justify-between" style="border-bottom: 1px solid #dddddd;">
								<view class="item">
									<view>状态</view>
									<label class="flex" style="align-items: center;">
										<text>{{channelinfo.is_freeze==1?'关':'开'}}</text>
										<switch color="#38987c" style="transform:scale(0.7)" :checked="channelinfo.is_freeze?false:true" @change="changeis_freeze(channelinfo.is_freeze)"></switch>
									</label>
								</view>
								
								<view class="item">
									<view>提现</view>
									<label class="flex" style="align-items: center;">
										<text>{{channelinfo.withdraw==0?'关':'开'}}</text>
										<switch color="#38987c" style="transform:scale(0.7)" :checked="channelinfo.withdraw?true:false" @change="changeis_withdraw(channelinfo.withdraw)"></switch>
									</label>
								</view>
							</view>
											
							<view class="item">
								<view>分成比例</view>
								<view class="flex justify-between">
									<view class="flex" style="align-items: center;"><input class="setinput" v-model="channelinfo.channel_rate" placeholder="请输入分成比例" />%</view>
								</view>
							</view>
							<view class="item">
								<view>收款人</view>
								<view><input class="setinput" v-model="channelinfo.aliuser" placeholder="请输入收款人姓名" /></view>
							</view>
							<view class="item">
								<view>支付宝</view>
								<view><input class="setinput" v-model="channelinfo.aliaccount" placeholder="请输入支付宝账号" /></view>
							</view>
							<view class="item">
								<view>邀请下级</view>
								<label class="flex" style="align-items: center;">
									<text>{{channelinfo.isleader==0?'关':'开'}}</text>
									<switch color="#38987c" style="transform:scale(0.7)" :checked="channelinfo.isleader?true:false" @change="changeis_isleader(channelinfo.isleader)"></switch>
								</label>
							</view>
							<view class="item">
								<view>上级ID</view>
								<view class="flex justify-between">
									<view class="flex" style="align-items: center;">
										<input class="setinput" v-model="channelinfo.fatherpid" placeholder="请输入上级ID" />
									</view>
									<view @click="viewedit('popup',channelinfo.fatherpid)">查看</view>
								</view>
							</view>
							<view style="width: 50%; margin: 16px auto;"><button class="btn" @click="savechannel">确定修改</button></view>
						</view>
							
						
						
<!-- 						
						<view class="info" v-if="tab==1">
							<view class="item">
								<view>名字</view>
								<view>{{channelinfo.realname}} ({{channelinfo.id}})</view>
							</view>
							<view class="item">
								<view>状态</view>
								<view :class="'status_'+channelinfo.is_freeze">{{channelinfo.is_freeze==0?'正常':'封禁'}}</view>
							</view>
							<view class="item">
								<view>电话</view>
								<view>{{channelinfo.mobile}}</view>
							</view>
							<view class="item">
								<view>注册时间</view>
								<view>{{channelinfo.create_time*1000|formatDate}}</view>
							</view>
							<view class="item">
								<view>分成比例</view>
								<view>{{channelinfo.channel_rate}}%</view>
							</view>
							<view class="item">
								<view>分成/余额</view>
								<view>{{channelinfo.cumulative_brokerage}}元 / {{channelinfo.brokerage}}元</view>
							</view>
							<view class="item">
								<view>邀请下级</view>
								<view :class="'status_'+channelinfo.isleader">{{channelinfo.isleader==1?'正常':'封禁'}}</view>
							</view>
							<view class="item" @click="viewinfo('popup',channelinfo.fatherpid)">
								<view>上级</view>
								<view>{{channelinfo.fathername}} ({{channelinfo.fatherpid}})</view>
							</view>
						</view>
					
					
					 -->
					
						<scroll-view scroll-y="true" class="scrollY order" v-if="tab==2">
							<view class="nodata" v-if="channeorderlist.total<1">无数据</view>
							<view v-for="(item,index) in channeorderlist.data">
								<view class="item">
									<view>
										<view>{{item.servicename}}（{{item.price}}）</view>
										<view>归属:{{item.desc}}</view>
									</view>
									<view>
										<view>金额:{{item.pay_money}}</view>
										<view>佣金:{{item.order_brokerage}}</view>
									</view>
								</view>
								<view class="time">{{item.create_time*1000|formatDate}}</view>
							</view>
							<view class="page">
								<view class="page-item">
									<wyb-pagination :total-items="channeorderlist.total" :page-items="channeorderlist.per_page" :current="channeorderlist.current_page" :show-total-item="true" :show-icon="true" @change="queryorder"/>
								</view>
							</view>
						</scroll-view>
						
						<scroll-view scroll-y="true" class="scrollY user" v-if="tab==3">
							<view class="nodata" v-if="userlist.total<1">无数据</view>
							<view v-for="(item,index) in userlist.data">
								<view class="item">
									<view class="username">
										<view><image  class="avatar" :src="item.avatar"></view>
										<view>{{item.nickname}}</view>
									</view>
									<view>
										<view class="area">{{item.desc}},消费<text>{{item.total_pay_number}}</text>次</view>
										<view class="time">{{item.create_time*1000|formatDate}}</view>
									</view>
								</view>
								
							</view>
							<view class="page">
								<view class="page-item">
									<wyb-pagination :total-items="userlist.total" :page-items="userlist.per_page" :current="userlist.current_page" :show-total-item="true" :show-icon="true" @change="querypuser"/>									
								</view>
							</view>
						</scroll-view>
						
						<scroll-view scroll-y="true" class="scrollY moneylog" v-if="tab==4">
							
							<view class="table">
								<view class="row header">
									<view class="cell">项目</view>
									<view class="cell">金额</view>
									<view class="cell">时间</view>
								</view>
								<view class="nodata" v-if="moneylog.total<1">无数据</view>
								
								<view class="row body" v-for="(item,index) in moneylog.data">
									<view class="cell">{{moneytype[item.type]}}</view>
									<view :class="'cell status_'+item.income">{{item.income==1?'':'-'}}{{item.money}}</view>
									<view class="cell">{{item.create_time*1000|formatDate}}</view>
								</view>
							</view>	
							<view class="page">
								<view class="page-item">
									<wyb-pagination :total-items="moneylog.total" :page-items="moneylog.per_page" :current="moneylog.current_page" :show-total-item="true" :show-icon="true" @change="querymoenlog"/>
								</view>
							</view>
						</scroll-view>

						<scroll-view scroll-y="true" class="scrollY moneylog" v-if="tab==5">
							
							<view class="table">
								<view class="row header">
									<view class="cell">ID</view>
									<view class="cell">
										<text style="border-bottom: 1px solid #fff;">姓名</text>
										<text>比例</text>
									</view>
									<view class="cell">
										<text style="border-bottom: 1px solid #fff;">关注</text>
										<text>注册</text>
									</view>
									<view class="cell">
										<text style="border-bottom: 1px solid #fff;">单量</text>
										<text>流水</text>
									</view>
									<view class="cell">
										<text style="border-bottom: 1px solid #fff;">分成</text>
										<text>余额</text>
									</view>
									<view class="cell">
										<text>操作</text>
									</view>
								</view>
								<view class="nodata" v-if="sonpid.total<1">无数据</view>
								
								<view class="row body" v-for="(item,index) in sonpid.data">
									<view :class="'cell status2_'+item.is_freeze"  @click="viewinfo('popup',item.id)">{{item.id}}</view>
									<view class="cell">
										<text>{{item.realname}}</text>
										<text>{{item.channel_rate}}%</text>
									</view>
									<view class="cell">
										<text>{{item.authcount}}</text>
										<text>{{item.joincount}}</text>
									</view>
									<view class="cell">
										<text>{{item.ordercount}}</text>
										<text>{{item.ordermoney}}</text>
									</view>
									<view class="cell">
										<text>{{item.cumulative_brokerage}}</text>
										<text>{{item.brokerage}}</text>
									</view>	
									<view class="cell">
										<text @click="viewedit('popup',item.id)">查看</text>
<!-- 										<text @click="viewedit('popup2',item.id)">修改</text>
 -->									</view>

								</view>
							</view>	
							<view class="page">
								<view class="page-item">
									<wyb-pagination :total-items="sonpid.total" :page-items="sonpid.per_page" :current="sonpid.current_page" :show-total-item="true" :show-icon="true" @change="querysonpid"/>
								</view>
							</view>
							
						</scroll-view>
						
						
						<scroll-view scroll-y="true" class="scrollY moneylog" v-if="tab==6">
							<view class="table">
								<view class="row header">
									<view class="cell">
										<text>日期</text>
									</view>
									<view class="cell">
										<text>关注</text>
									</view>
									<view class="cell">
										<text>注册</text>
									</view>
								</view>
								<view class="nodata" v-if="daydata.total<1">无数据</view>
								
								<view class="row body" v-for="(item,index) in daydata.data">
									<view class="cell">
										<text>{{item.day}}</text>
									</view>
									<view class="cell">
										<text>{{item.auth}}</text>
									</view>
									<view class="cell">
										<text>{{item.reg}}</text>
									</view>
								</view>
							</view>	
							<view class="page">
								<view class="page-item">
									<wyb-pagination :total-items="daydata.total" :page-items="daydata.per_page" :current="daydata.current_page" :show-total-item="true" :show-icon="true" @change="querydaydata"/>
								</view>
							</view>
							
						</scroll-view>		
										

						<liu-calendar-date ref="calendar2" isRange @checked='getDate2'></liu-calendar-date>
						<scroll-view scroll-y="true" class="scrollY" v-if="tab==7">
							<view style="margin-bottom: 8px;">
								<view class="query">	
									<view class='date' @click="openCalendar2">{{ startDate+' 至 '+endDate }}</view>		
									<view class="btn" @click.stop="querychanneldata()">查看</view>
								</view>
							</view>
							
							<view class="table">
								<view class="row header">
									<view class="cell">
										日期
									</view>
									<view class="cell">
										<text style="border-bottom: 1px solid #fff;">关注</text>
										<text>注册</text>
									</view>
									<view class="cell">
										<text style="border-bottom: 1px solid #fff;">订单</text>
										<text>金额</text>
									</view>
								</view>
								<view class="row body" v-for="(item,index) of piddata">
									<view class="cell">
										{{index}}
									</view>
									<view class="cell">
										<text>{{item.user.auth}}</text>
										<text>{{item.user.reg}}</text>
									</view>
									<view class="cell">
										<text>{{item.order.count}}</text>
										<text>￥{{item.order.amount?item.order.amount:0}}</text>
									</view>								
								</view>
							</view>	

							
						</scroll-view>


					</view>
				</view>
			</view>
		</uni-popup>
				
		<uni-popup ref="popup2" type="bottom" :animation="true" :maskClick="true">
			<view class="popup">
				<view class="main">
					<view class="content">
						
						<view class="info" v-if="tab==1">
							<view class="item">
								<view>名字</view>
								<view>{{channelinfo.realname}} ({{channelinfo.id}})</view>
							</view>
							<view class="item">
								<view>电话</view>
								<view>{{channelinfo.mobile}}</view>
							</view>
							<view class="item">
								<view>状态</view>
								<label class="flex" style="align-items: center;">
									<text>{{channelinfo.is_freeze==1?'关':'开'}}</text>
									<switch color="#38987c" style="transform:scale(0.7)" :checked="channelinfo.is_freeze?false:true" @change="changeis_freeze(channelinfo.is_freeze)"></switch>
								</label>
							</view>
							<view class="item">
								<view>分成比例</view>
								<view class="flex justify-between">
									<view class="flex" style="align-items: center;"><input class="setinput" v-model="channelinfo.channel_rate" placeholder="请输入分成比例" />%</view>
								</view>
							</view>
							<view class="item">
								<view>收款人</view>
								<view><input class="setinput" v-model="channelinfo.aliuser" placeholder="请输入收款人姓名" /></view>
							</view>
							<view class="item">
								<view>支付宝</view>
								<view><input class="setinput" v-model="channelinfo.aliaccount" placeholder="请输入支付宝账号" /></view>
							</view>
							<view class="item">
								<view>邀请下级</view>
								<label class="flex" style="align-items: center;">
									<text>{{channelinfo.isleader==0?'关':'开'}}</text>
									<switch color="#38987c" style="transform:scale(0.7)" :checked="channelinfo.isleader?true:false" @change="changeis_isleader(channelinfo.isleader)"></switch>
								</label>
							</view>
							<view class="item">
								<view>上级ID</view>
								<view class="flex justify-between">
									<view class="flex" style="align-items: center;"><input class="setinput" v-model="channelinfo.fatherpid" placeholder="请输入上级ID" /></view>
								</view>
							</view>
							<view style="width: 50%; margin: 16px auto;"><button class="btn" @click="savechannel">确定修改</button></view>
						</view>
											
						
					</view>
				</view>
			</view>
		</uni-popup>
	
	</view>
</template>

<script>
	import wybPagination from '@/components/wyb-pagination/wyb-pagination.vue'

	var that,App=getApp(),Comm=getApp().comm;
	export default {
		components: {
		        wybPagination
		},
		data() {
			return {
				key:'',
				sort:'id',
				sort:{
					key:'id',
					desc:0
				},
				channel:{},
				user_id:0,
				piddata:{},
				startDate:'',
				endDate:'',
				channeldata:[],
				channelinfo:{},
				tab:1,
				channeorderlist:{},
				userlist:{},
				moneylog:{},
				sonpid:{},
				daydata:{},
				moneytype:{
					'1':'下单',
					'2':'退款',
					'4':'充值',
					'5':'佣金',
					'6':'结算',
					'7':'提现',
					'8':'提现驳回',
					'9':'技师佣金',
				}
			}
		},
		onLoad() {
			that=this;
			const tiemtemp=Math.round(new Date().getTime()/1000);
			const date=that.comm.formatTime(tiemtemp);
			that.startDate=`${date.year}-${date.month}-${date.day}`;
			that.endDate=`${date.year}-${date.month}-${date.day}`;
			this.loaddata();
		},
		methods: {
			getQrcode(id){
				Comm.http('/api/tool/getQrcode',{uid:id},'POST').then(info=>{
					if(info.code==1){
						uni.previewImage({
							urls:[info.data]
						});
					}else{
						uni.showToast({
							title:info.msg,
							icon:'fail',
							mask:true
						});
					}
				});
			},
			openCalendar2() {
				this.$refs.calendar2.open()
			},
			getDate2(e) {
				if(e.value.length<1){
					return;
				}
				if(e.value.length>=2){
					this.startDate=e.value[0];
					this.endDate=e.value[1];
				}else{
					this.startDate=e.value[0];
					this.endDate=e.value[0];
				}
				// this.getData();
			},
			setItemData(data,id){
				let res= {ordercount: 0, ordermoney: 0, authcount: 0, joincount: 0};
				for (let item of that.channel.data) {
					if(item.id==id){
						res=data;
						break;
					}
				}
				return res;
			},
			loaddata(e={current:1}){
				if(e.current==1){
					that.channel={};
				}
				Comm.http('/api/tool/channlelist',{page:e.current,key:this.key,sort:this.sort.key,desc:this.sort.desc?'asc':'desc'},'POST').then(res=>{
					that.channeldata=[];
					that.channel=res.data;
					for (let item of res.data.data) {
						Comm.http('/api/tool/querychelinfo',{id:item.id},'POST').then(info=>{
							if(info.code==1){
								let itemdata=that.setItemData(info.data,item.id);
								item.ordercount=itemdata.ordercount;
								item.ordermoney=itemdata.ordermoney;
								item.authcount=itemdata.authcount;
								item.joincount=itemdata.joincount;
								that.channeldata.push(item);
							}
						});
					}
				});
			},
			changesort(key){
				this.sort.key=key;
				this.sort.desc=!this.sort.desc;
				this.loaddata();
			},
			changetab(e){
				this.tab=e;
				if(e==1){
					this.querychannel(this.user_id);
				}else if(e==2){
					this.queryorder();
				}else if(e==3){
					this.querypuser();
				}else if(e==4){
					this.querymoenlog();
				}else if(e==5){
					this.querysonpid();
				}else if(e==6){
					this.querydaydata();
				}
			},
			viewinfo(e,userid) {
				this.tab=1;
				this.user_id=userid;


				
			},
			viewedit(e,userid){
				this.tab=1;
				this.user_id=userid;
				if(userid!=0){
					this.querychannel(this.user_id);
					this.$refs[e].open();
				}
			},
			querychannel(id){
				Comm.http('/api/tool/querychannel',{user_id:this.user_id},'POST').then(res=>{
					if(res.code==1){
						that.channelinfo=res.data;						
					}
					else{
						uni.showToast({
							icon:'none',
							title:res.msg
						});
					}
						
				});
			},
			changeis_freeze(e){
				this.channelinfo.is_freeze=e==0?1:0;
			},
			changeis_withdraw(e){
				this.channelinfo.withdraw=e?0:1;
			},
			changeis_isleader(e){
				this.channelinfo.isleader=e==0?1:0;
			},
			savechannel(){
				if(!/^\d+$/.test(this.channelinfo.channel_rate)){
					uni.showToast({icon:'none',title:'分成比例有误'});
					return;
				}
				if(!/^\d+$/.test(this.channelinfo.is_freeze)){
					uni.showToast({icon:'none',title:'分成权限有误'});
					return;
				}
				
				if(this.channelinfo.aliuser!=''){
					if(!/^[\u4e00-\u9fa5]{2,}$/.test(this.channelinfo.aliuser)){
						uni.showToast({icon:'none',title:'收款人姓名有误'});
						return;		
					}
				}
				if(this.channelinfo.aliaccount!=''){
					if(!/(^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$)|(^\d{11}$)/.test(this.channelinfo.aliaccount)){
						uni.showToast({icon:'none',title:'支付宝账号为邮箱或手机'});
						return;
					}
				}
				
				if(!/^\d+$/.test(this.channelinfo.fatherpid)){
					uni.showToast({icon:'none',title:'上级ID有误'});
					return;
				}
				
				Comm.http('/api/tool/savechannel',{data:this.channelinfo},'POST').then(res=>{
					uni.showToast({
						icon:'none',
						title:res.msg
					});
				});
				console.log(that.channelinfo)
			},
			queryorder(page={current:1}){
				if(page.current==1){
					that.channeorderlist={};
				}
				Comm.http('/api/tool/queryorder',{user_id:this.user_id,page:page.current},'POST').then(res=>{
					if(res.code==1)
						that.channeorderlist=res.data;
					else
						uni.showToast({
							icon:'none',
							title:res.msg
						});
				});
			},
			querypuser(page={current:1}){
				if(page.current==1){
					that.userlist={};
				}
				Comm.http('/api/tool/querypuser',{user_id:this.user_id,page:page.current},'POST').then(res=>{
					if(res.code==1)
						that.userlist=res.data;
					else
						uni.showToast({
							icon:'none',
							title:res.msg
						});
				});
			},
			querymoenlog(page={current:1}){
				if(page.current==1){
					that.moneylog={};
				}
				Comm.http('/api/tool/querymoenlog',{user_id:this.user_id,page:page.current},'POST').then(res=>{
					if(res.code==1)
						that.moneylog=res.data;
					else
						uni.showToast({
							icon:'none',
							title:res.msg
						});
				});
			},
			querysonpid(page={current:1}){
				if(page.current==1){
					that.sonpid={};
				}
				Comm.http('/api/tool/querysonpid',{user_id:this.user_id,page:page.current},'POST').then(res=>{
					if(res.code==1)
						that.sonpid=res.data;
					else
						uni.showToast({
							icon:'none',
							title:res.msg
						});
				});
			},
			querydaydata(page={current:1}){
				if(page.current==1){
					that.daydata={};
				}
				Comm.http('/api/tool/channelDayData',{pid:this.user_id,page:page.current},'POST').then(res=>{
					if(res.code==1)
						that.daydata=res.data;
					else
						uni.showToast({
							icon:'none',
							title:res.msg
						});
				});
			},
			querychanneldata(){
				Comm.http('/api/tool/channeldata',{pid:this.user_id,start:this.startDate,end:this.endDate},'POST').then(res=>{
					if(res.code==1)
						that.piddata=res.data;
					else
						uni.showToast({
							icon:'none',
							title:res.msg
						});
				});
			}
			
			
			
		}
	}
</script>

<style lang="scss">
	.query{
		display: flex;  justify-content: center;
		.date{padding:4px 0; border-bottom: 1px solid #999999; margin-right: 16px;}
		.btn{
			text-align: center; border: 1px solid #666; border-radius: 5px;
		}
	}
	.btn{
		height: 35px;
		line-height: 35px;
		padding: 0 3vw;
		border: none;
		background-color: #38987c;
		color: #fff;
		border-radius: 6px;
		font-size: 13px;
	}
	.setinput{
		font-size: 13px;
		border:none;
		background-color: #f0f0f0; border-radius: 5px;
	}

	.page{
		position: fixed; left: 0; bottom: 0; width: 100vw; padding: 8px 0; background-color: #fff; border-top: #dddddd 1px solid;
		.page-item{
			width: 95vw; margin: 0 auto;
		}
	}
	
	.popup{
		background-color: #fff; border-radius: 15px 15px 0 0; padding: 8px 0; width: 100vw;
		.main{
			width: 95vw; max-height: 75vh; min-height: 50vh; margin: 0 auto;
			.tab{
				justify-content: flex-start; align-items: center;
				.active{
					border-bottom: 2px solid #ff5500;
				}
				view{
					margin-right: 12px; padding: 4px 0;
				}
			}
			.content{
				margin-top: 16px;
			}
			.info{
				.item{
					display: flex; justify-content: flex-start; align-items: center; padding: 8px 0; border-bottom: 1px solid #dddddd;
				}
				.item>view:first-child{
					width: 60px;
					font-size: 13px;
					margin-right: 8px;
					text-align: right;
					color: #5d5d5d;
				}
			}
			.order{
				padding-bottom: 50px;
				.item{
					display: flex; justify-content: space-between; align-items: center; line-height: 22px;

				}
				.time{
					    color: #929292;
					    padding: 8px 0;
					    border-bottom: 1px solid #dddddd;
					    text-align: right;
					    font-size: 12px;
				}
			}
			.user{
				padding-bottom: 50px;
			
				.item{
					display: flex; justify-content: space-between; align-items: center; line-height: 22px;
					border-bottom: 1px solid #dddddd;
				}
				.time{
						color: #929292;
						text-align: right;
						font-size: 12px;
				}
				.username{
					text-align: left;
				}
				.area{
					text-align: right;
					text{
						color: #ff5500;
					}
				}
			}
			.moneylog{
				padding-bottom: 50px;
				.item{
					display: flex; justify-content: space-between; align-items: center; line-height: 22px;
					border-bottom: 1px solid #dddddd;
				}
				.time{
						color: #929292;
						text-align: right;
						font-size: 12px;
				}
				.status_2{
					color: #ff0000;
				}
				.status_1{
					color: #38987c;
				}
			}
			.scrollY{
				height: 60vh;
			}
		}
		.nodata{
			text-align: center; padding: 24px 0 0;
		}
		.avatar{
			width: 24px; height: 24px; border-radius: 50%;
		}

	}
	.noborder{
		border: none !important;
	}
</style>

